<template>
  <div class="bg">
    <el-card class="box-card">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/topicality' }">话题管理</el-breadcrumb-item>
          <el-breadcrumb-item>话题分类</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="8" :offset="12">
          <el-input style="width:300px" v-model="selectCode" placeholder="请输入话题分类名称"></el-input>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-select v-model="status" placeholder="状态" style="width:200px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8" :offset="1">
          <div style="display:flex">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="end">
          <el-col :span="2">
            <el-button type="success" @click="addclassify">新增话题分类</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="typeName" label="话题分类名称" align="center"></el-table-column>
        <el-table-column prop="typeTopicNunber" label="话题数量" align="center"></el-table-column>
        <el-table-column prop="topicPostNumber" label="讨论" align="center"></el-table-column>
        <el-table-column prop="typePostViews" label="阅读" align="center"></el-table-column>
        <el-table-column prop="typeCreateTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.topicIsTop==1?'正常':'置顶'}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="primary"
              size="small"
            >{{scope.row.topicIsTop==1?'置顶':'取消'}}</el-button>
            <el-button @click="redact(scope.row)" type="warning" size="small">编辑</el-button>
            <el-button @click="delet(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="total,  prev, pager, next, jumper"
        :total="total"
        :current-page="current"
        style="margin-top:24px"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-card>
    <!-- 新增话题分类 -->
    <el-dialog title=" " :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="话题分类名称" prop="typeName">
          <el-input v-model="ruleForm.typeName" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/components/commom.js";
export default {
  data() {
    return {
      dialogVisible: false, //弹框
      options: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 2,
          label: "置顶"
        }
      ],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      total: 0,
      current: 1, //页数
      //   新增名字
      ruleForm: {
        typeName: ""
      },
      selectCode: "", //查询
      status: "", //状态
      // 新增分类
      rules: {
        typeName: [
          { required: true, message: "请输入话题分类名称", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.topickind();
  },
  methods: {
    // 话题分类列表
    topickind() {
      let param = {
        size: 10,
        current: this.current,
        selectCode: this.selectCode,
        topicIsTop: this.status
      };
      this.$http.article.topickind(param).then(res => {
        this.tableData = res.result.records;
        this.total = res.result.total;
        console.log("获取话题分类列表", res);
      });
    },
    // 新增分类
    addclassify() {
      this.resetForm("ruleForm");
      // this.$refs['ruleForm'].resetFields();
      // typeId
      this.dialogVisible = true;
      //弹窗打开，实现新增数据
      delete this.ruleForm.typeId;
    },

    // 查询
    search() {
      this.current = 1;
      this.topickind();
    },
    // 重置
    reset() {
      this.selectCode = ""; //查询
      this.status = ""; //状态
      this.topickind();
    },
    // 置顶
    handleClick(val) {
      console.log("置顶成", val);
      let topmessage = "";
      if (val.topicIsTop == 1) {
        topmessage = "置顶";
      } else {
        topmessage = "取消置顶";
      }
      this.$confirm(`此操作将${topmessage}文件, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let top = 0;
          if (val.topicIsTop == 1) {
            top = 2;
          } else {
            top = 1;
          }
          let param = {
            topicIsTop: top,
            typeId: val.typeId
          };
          this.$http.article.addtopickind(param).then(res => {
            if (res.code == 200) this.$message.success(res.msg);
            this.topickind();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 话题编辑
    redact(val) {
      this.$http.article
        .getTopickind({ petTopicTypeId: val.typeId })
        .then(res => {
          this.ruleForm = res.result;
          this.dialogVisible = true;
          console.log("获取详情", res);
        });
    },
    // 话题分页
    handleCurrentChange(val) {
      this.current = val;
      this.topickind();
    },
    // 删除话题分类
    delet(val) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.article
            .deletTopickind({ petTopicTypeId: val.typeId })
            .then(res => {
              if (res.code == 200) this.$message.success(res.msg);
              /*--------删除成功之后获取上一页的数据,避免是否为空--------*/

              //此时已经实现删除操作，所以total的值需要减size，Math.ceil是向上取整，保证始终大于等于0
              const totalPage = Math.ceil((this.total - 1) / 10);

              console.log("totalPage", totalPage);

              //将当前页码与删除数据之后的总页数进行比较，避免当前页码不存在
              const pagenum =
                this.current > totalPage ? totalPage : this.current;

              console.log("获取总条数", pagenum);

              //避免pagenum变为0
              this.current = pagenum < 1 ? 1 : pagenum;

              this.topickind();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      console.log(val, "话题分类");
    },
    //话题分类
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          if (this.ruleForm.typeId) {
            this.$http.article.addtopickind(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success(res.msg);
              delete this.ruleForm.typeId;
              this.ruleForm.typeName = "";
              this.dialogVisible = false;
              this.topickind();
            });
          } else {
            let admin = JSON.parse(sessionStorage.getItem("userMessage"));
            let param = {
              typeName: this.ruleForm.typeName,
              adminId: admin.adminId
            };
            this.$http.article.addtopickind(param).then(res => {
              if (res.code == 200) this.$message.success(res.msg);
              this.dialogVisible = false;
              this.ruleForm.typeName = "";
              this.topickind();
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      console.log(111);
        this.ruleForm.typeName = "";
      // this.$refs[formName].resetFields();
    },
    // 话题关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          console.log(123);
          this.resetForm("ruleForm");
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;
  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}
.box-card {
  width: 98%;
  height: 130px;
  margin: 0 auto;
}
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>